<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>王者荣耀英雄列表</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: bisque;
        }

        button {
            margin-right: 10px;
            padding: 5px 10px;

            background-color: burlywood;
        }

        #hero-list {
            display: flex;
            flex-wrap: wrap;
        }

        #hero-list div {
            /* border: 1px solid #3058da; */
            padding: 10px;
            margin: 10px;
            width: 150px;
           
        }

       #hero-list div:hover{
            transform: scale(1,1);
        }
         

        #hero-list img {
            width: 150px;
        
        }

    </style>
</head>

<body>
    <h1 id="cen">王者荣耀英雄列表</h1>
    <div id="filters">
        <button id="allButton">全部</button>
        <button id="warriorButton">战士</button>
        <button id="mageButton">法师</button>
        <button id="archerButton">射手</button>
        <button id="assassinButton">刺客</button>
        <button id="tankButton">坦克</button>
        <button id="supportButton">辅助</button>
    </div>
    <div id="hero-list"></div>

    <script>
        // https://pvp.qq.com/webplat/info/news_version3/15592/18024/23901/24397/24398/m17330/list_1.shtml?callback=createHeroList
        async function fetchData(url) {
            try {
                const response = await fetch(url);
                const data = await response.text();  // 解析响应体为文本

                // 使用正则表达式移除 createHeroList 包裹的函数调用
                const jsonData = data.replace(/^[a-zA-Z]+/, '').replace(/^\(/, '').replace(/\)$/, '');

                // 解析成 JavaScript 对象
                const parsedData = JSON.parse(jsonData);

                // 过滤所需的数据
                const filteredObj = parsedData.data.map(item => ({
                    title: item.title,
                    occupation: item.occupation,
                    heroImg: item.heroimg
                }));
                const res = {
                    data: filteredObj.slice(1)
                }
                return res;  // 返回处理后的数据
            } catch (error) {
                console.error('请求出错:', error);
                return [];  // 返回一个空数组，表示请求失败
            }
        }

        const heroListDiv = document.getElementById('hero-list');
        const allButton = document.getElementById('allButton');
        const warriorButton = document.getElementById('warriorButton');
        const mageButton = document.getElementById('mageButton');
        const archerButton = document.getElementById('archerButton');
        const assassinButton = document.getElementById('assassinButton');
        const tankButton = document.getElementById('tankButton');
        const supportButton = document.getElementById('supportButton');

        let allHeroes = [];

        async function renderHeroes() {
            const url = 'https://pvp.qq.com/webplat/info/news_version3/15592/18024/23901/24397/24398/m17330/list_1.shtml?callback=createHeroList';
            const res = await fetchData(url);
            allHeroes = res.data;

            // 渲染所有英雄
            renderFilteredHeroes('');
        }

        function renderFilteredHeroes(occupation) {
            heroListDiv.innerHTML = '';
            const filteredHeroes = occupation === ''
                ? allHeroes
                : allHeroes.filter(hero => hero.occupation === occupation);

            filteredHeroes.forEach(hero => {
                const heroDiv = document.createElement('div');
                const heroImg = document.createElement('img');
                const heroName = document.createElement('p');

                heroImg.src = hero.heroImg;
                heroName.textContent = hero.title.replace('故事站-英雄列表-', '');

                heroDiv.appendChild(heroImg);
                heroDiv.appendChild(heroName);
                heroListDiv.appendChild(heroDiv);
            });
        }

        allButton.addEventListener('click', () => {
            renderFilteredHeroes('');
        });

        warriorButton.addEventListener('click', () => {
            renderFilteredHeroes('战士');
        });

        mageButton.addEventListener('click', () => {
            renderFilteredHeroes('法师');
        });

        archerButton.addEventListener('click', () => {
            renderFilteredHeroes('射手');
        });

        assassinButton.addEventListener('click', () => {
            renderFilteredHeroes('刺客');
        });

        tankButton.addEventListener('click', () => {
            renderFilteredHeroes('坦克');
        });

        supportButton.addEventListener('click', () => {
            renderFilteredHeroes('辅助');
        });

        window.addEventListener('load', renderHeroes);
    </script>
</body>

</html>